<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花瓣</title>
    <link rel="icon" href="./logo.svg" type="image/x-icon">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="page">
        <header>
            <div class="wrapper">
                <img src="./assets/logo.svg" alt="" class="logo">
                <a href="#" class="find">发现</a>
                <a href="#" class="race">设计大赛</a>
                <div class="form">
                    <select class="downPull">
                        <option value="采集">采集</option>
                        <option value="画板">画板</option>
                        <option value="用户">用户</option>
                    </select>
                    <input type="text" placeholder="搜索你喜欢的">
                    <a href="#" class="select"></a>
                </div>
                <div class="works">
                    <!-- <span>作品集</span> -->
                    <canvas id="worksCanvas" width="65" height="26"></canvas>
                    <i></i>
                </div>
                <div class="nav-icon"></div>
                <div class="navBack">
                    <i></i>
                    花瓣占位
                </div>
                <div class="login">登录/注册</div>
            </div>
        </header>
        <main>
            <div class="wrapper">
                <div class="menu clearfix">
                    <nav class="menuLeft">
                        <span>采集</span>
                        <span class="active">画板</span>
                    </nav>
                    <nav class="menuRight">
                        <ul class="clearfix show">
                            <li class="active">最新</li>
                            <li>UI/UX</li>
                            <li>平面</li>
                            <li>插画/漫画</li>
                            <li>摄影</li>
                            <li>游戏</li>
                            <li>动漫</li>
                            <li>工业设计</li>
                            <li>建筑设计</li>
                            <li>人文艺术</li>
                            <li>家居/家装</li>
                            <li>女装/搭配</li>
                            <li>男士/风尚</li>
                            <li>造型/美妆</li>
                            <li>手工/布艺</li>
                            <li>美食</li>
                            <li>旅行</li>
                            <li>婚礼</li>
                            <li>儿童</li>
                            <li>宠物</li>
                            <li>美图</li>
                            <li>明星</li>
                            <li>美女</li>
                            <li>礼物</li>
                            <li>极客</li>
                            <li>数据图</li>
                            <li>汽车/摩托</li>
                            <li>电影/图书</li>
                            <li>生活百科</li>
                            <li>教育</li>
                            <li>运动</li>
                            <li>搞笑</li>
                        </ul>
                        <img src="./assets/is-fold.svg" alt="" class="showUl" style="cursor: pointer;">
                    </nav>
                </div>

            </div>
            <br>
            <div class="leftMenuContent">
                <div class="wrapper collection">
                    <div class="content active">
                        采集页面
                    </div>
                    <div class="content">“采集”UI/UX</div>
                    <div class="content">“采集”平面</div>
                    <div class="content">“采集”插画/漫画</div>
                    <div class="content">“采集”摄影</div>
                    <div class="content">“采集”游戏</div>
                    <div class="content">“采集”动漫</div>
                    <div class="content">“采集”工业设计</div>
                    <div class="content">“采集”建筑设计</div>
                    <div class="content">“采集”人文艺术</div>
                    <div class="content">“采集”家居/家装</div>
                    <div class="content">“采集”女装/搭配</div>
                    <div class="content">“采集”男士/风尚</div>
                    <div class="content">“采集”造型/美妆</div>
                    <div class="content">“采集”手工/布艺</div>
                    <div class="content">“采集”美食</div>
                    <div class="content">“采集”旅行</div>
                    <div class="content">“采集”婚礼</div>
                    <div class="content">“采集”儿童</div>
                    <div class="content">“采集”宠物</div>
                    <div class="content">“采集”美图</div>
                    <div class="content">“采集”明星</div>
                    <div class="content">“采集”美女</div>
                    <div class="content">“采集”礼物</div>
                    <div class="content">“采集”极客</div>
                    <div class="content">“采集”数据图</div>
                    <div class="content">“采集”汽车/摩托</div>
                    <div class="content">“采集”电影/图书</div>
                    <div class="content">“采集”生活百科</div>
                    <div class="content">“采集”教育</div>
                    <div class="content">“采集”运动</div>
                    <div class="content">“采集”搞笑</div>
                </div>
                <div class="wrapper drawing active">
                    <div class="content active">
                        <div class="board">
                            <div class="link">
                                <img src="./assets/webp.webp" alt="" class="large">
                                <img src="./assets/webp1.webp" alt="">
                                <img src="./assets/webp2.webp" alt="">
                                <img src="./assets/webp3.webp" alt="">
                                <div class="text">
                                    <h3>开工海报【源文件可下载】点击画面可跳转至下载界面！</h3>
                                    <h4>14&nbsp;采集&nbsp;&nbsp;11&nbsp;关注</h4>
                                    <div class="avatar">
                                        <img src="./assets/eyeys.jfif" alt="" width="24" height="24">
                                        <div class="urlname">淘宝：WOW哇喔视觉</div>
                                        <img src="./assets/icon_pro_small.png" alt="" width="20" height="12">
                                    </div>
                                </div>
                            </div>
                            <div class="linkBack">
                                <i></i>
                                预览蒙版
                            </div>
                            <div class="followBoard">
                                <a href="#" class="notice">关注</a>
                                <a href="#" class="proceeding">预览</a>
                            </div>
                        </div>
                        <div class="board">
                            <div class="link">
                                <img src="./assets/webp.webp" alt="" class="large">
                                <img src="./assets/webp1.webp" alt="">
                                <img src="./assets/webp2.webp" alt="">
                                <img src="./assets/webp3.webp" alt="">
                                <div class="text">
                                    <h3>开工海报【源文件可下载】点击画面可跳转至下载界面！</h3>
                                    <h4>14&nbsp;采集&nbsp;&nbsp;11&nbsp;关注</h4>
                                    <div class="avatar">
                                        <img src="./assets/eyeys.jfif" alt="" width="24" height="24">
                                        <div class="urlname">淘宝：WOW哇喔视觉</div>
                                        <img src="./assets/icon_pro_small.png" alt="" width="20" height="12">
                                    </div>
                                </div>
                            </div>
                            <div class="linkBack">
                                <i></i>
                                预览蒙版
                            </div>
                            <div class="followBoard">
                                <a href="#" class="notice">关注</a>
                                <a href="#" class="proceeding">预览</a>
                            </div>
                        </div>
                        <div class="board">
                            <div class="link">
                                <img src="./assets/webp.webp" alt="" class="large">
                                <img src="./assets/webp1.webp" alt="">
                                <img src="./assets/webp2.webp" alt="">
                                <img src="./assets/webp3.webp" alt="">
                                <div class="text">
                                    <h3>开工海报【源文件可下载】点击画面可跳转至下载界面！</h3>
                                    <h4>14&nbsp;采集&nbsp;&nbsp;11&nbsp;关注</h4>
                                    <div class="avatar">
                                        <img src="./assets/eyeys.jfif" alt="" width="24" height="24">
                                        <div class="urlname">淘宝：WOW哇喔视觉</div>
                                        <img src="./assets/icon_pro_small.png" alt="" width="20" height="12">
                                    </div>
                                </div>
                            </div>
                            <div class="linkBack">
                                <i></i>
                                预览蒙版
                            </div>
                            <div class="followBoard">
                                <a href="#" class="notice">关注</a>
                                <a href="#" class="proceeding">预览</a>
                            </div>
                        </div>
                        <div class="board">
                            <div class="link">
                                <img src="./assets/webp.webp" alt="" class="large">
                                <img src="./assets/webp1.webp" alt="">
                                <img src="./assets/webp2.webp" alt="">
                                <img src="./assets/webp3.webp" alt="">
                                <div class="text">
                                    <h3>开工海报【源文件可下载】点击画面可跳转至下载界面！</h3>
                                    <h4>14&nbsp;采集&nbsp;&nbsp;11&nbsp;关注</h4>
                                    <div class="avatar">
                                        <img src="./assets/eyeys.jfif" alt="" width="24" height="24">
                                        <div class="urlname">淘宝：WOW哇喔视觉</div>
                                        <img src="./assets/icon_pro_small.png" alt="" width="20" height="12">
                                    </div>
                                </div>
                            </div>
                            <div class="linkBack">
                                <i></i>
                                预览蒙版
                            </div>
                            <div class="followBoard">
                                <a href="#" class="notice">关注</a>
                                <a href="#" class="proceeding">预览</a>
                            </div>
                        </div>
                        <div class="board">
                            <div class="link">
                                <img src="./assets/webp.webp" alt="" class="large">
                                <img src="./assets/webp1.webp" alt="">
                                <img src="./assets/webp2.webp" alt="">
                                <img src="./assets/webp3.webp" alt="">
                                <div class="text">
                                    <h3>开工海报【源文件可下载】点击画面可跳转至下载界面！</h3>
                                    <h4>14&nbsp;采集&nbsp;&nbsp;11&nbsp;关注</h4>
                                    <div class="avatar">
                                        <img src="./assets/eyeys.jfif" alt="" width="24" height="24">
                                        <div class="urlname">淘宝：WOW哇喔视觉</div>
                                        <img src="./assets/icon_pro_small.png" alt="" width="20" height="12">
                                    </div>
                                </div>
                            </div>
                            <div class="linkBack">
                                <i></i>
                                预览蒙版
                            </div>
                            <div class="followBoard">
                                <a href="#" class="notice">关注</a>
                                <a href="#" class="proceeding">预览</a>
                            </div>
                        </div>
                        <div class="board">
                            <div class="link">
                                <img src="./assets/webp.webp" alt="" class="large">
                                <img src="./assets/webp1.webp" alt="">
                                <img src="./assets/webp2.webp" alt="">
                                <img src="./assets/webp3.webp" alt="">
                                <div class="text">
                                    <h3>开工海报【源文件可下载】点击画面可跳转至下载界面！</h3>
                                    <h4>14&nbsp;采集&nbsp;&nbsp;11&nbsp;关注</h4>
                                    <div class="avatar">
                                        <img src="./assets/eyeys.jfif" alt="" width="24" height="24">
                                        <div class="urlname">淘宝：WOW哇喔视觉</div>
                                        <img src="./assets/icon_pro_small.png" alt="" width="20" height="12">
                                    </div>
                                </div>
                            </div>
                            <div class="linkBack">
                                <i></i>
                                预览蒙版
                            </div>
                            <div class="followBoard">
                                <a href="#" class="notice">关注</a>
                                <a href="#" class="proceeding">预览</a>
                            </div>
                        </div>
                        <div class="board">
                            <div class="link">
                                <img src="./assets/webp.webp" alt="" class="large">
                                <img src="./assets/webp1.webp" alt="">
                                <img src="./assets/webp2.webp" alt="">
                                <img src="./assets/webp3.webp" alt="">
                                <div class="text">
                                    <h3>开工海报【源文件可下载】点击画面可跳转至下载界面！</h3>
                                    <h4>14&nbsp;采集&nbsp;&nbsp;11&nbsp;关注</h4>
                                    <div class="avatar">
                                        <img src="./assets/eyeys.jfif" alt="" width="24" height="24">
                                        <div class="urlname">淘宝：WOW哇喔视觉</div>
                                        <img src="./assets/icon_pro_small.png" alt="" width="20" height="12">
                                    </div>
                                </div>
                            </div>
                            <div class="linkBack">
                                <i></i>
                                预览蒙版
                            </div>
                            <div class="followBoard">
                                <a href="#" class="notice">关注</a>
                                <a href="#" class="proceeding">预览</a>
                            </div>
                        </div>
                        <div class="board">
                            <div class="link">
                                <img src="./assets/webp.webp" alt="" class="large">
                                <img src="./assets/webp1.webp" alt="">
                                <img src="./assets/webp2.webp" alt="">
                                <img src="./assets/webp3.webp" alt="">
                                <div class="text">
                                    <h3>开工海报【源文件可下载】点击画面可跳转至下载界面！</h3>
                                    <h4>14&nbsp;采集&nbsp;&nbsp;11&nbsp;关注</h4>
                                    <div class="avatar">
                                        <img src="./assets/eyeys.jfif" alt="" width="24" height="24">
                                        <div class="urlname">淘宝：WOW哇喔视觉</div>
                                        <img src="./assets/icon_pro_small.png" alt="" width="20" height="12">
                                    </div>
                                </div>
                            </div>
                            <div class="linkBack">
                                <i></i>
                                预览蒙版
                            </div>
                            <div class="followBoard">
                                <a href="#" class="notice">关注</a>
                                <a href="#" class="proceeding">预览</a>
                            </div>
                        </div>
                        <div class="board">
                            <div class="link">
                                <img src="./assets/webp.webp" alt="" class="large">
                                <img src="./assets/webp1.webp" alt="">
                                <img src="./assets/webp2.webp" alt="">
                                <img src="./assets/webp3.webp" alt="">
                                <div class="text">
                                    <h3>开工海报【源文件可下载】点击画面可跳转至下载界面！</h3>
                                    <h4>14&nbsp;采集&nbsp;&nbsp;11&nbsp;关注</h4>
                                    <div class="avatar">
                                        <img src="./assets/eyeys.jfif" alt="" width="24" height="24">
                                        <div class="urlname">淘宝：WOW哇喔视觉</div>
                                        <img src="./assets/icon_pro_small.png" alt="" width="20" height="12">
                                    </div>
                                </div>
                            </div>
                            <div class="linkBack">
                                <i></i>
                                预览蒙版
                            </div>
                            <div class="followBoard">
                                <a href="#" class="notice">关注</a>
                                <a href="#" class="proceeding">预览</a>
                            </div>
                        </div>
                        <div class="board">
                            <div class="link">
                                <img src="./assets/webp.webp" alt="" class="large">
                                <img src="./assets/webp1.webp" alt="">
                                <img src="./assets/webp2.webp" alt="">
                                <img src="./assets/webp3.webp" alt="">
                                <div class="text">
                                    <h3>开工海报【源文件可下载】点击画面可跳转至下载界面！</h3>
                                    <h4>14&nbsp;采集&nbsp;&nbsp;11&nbsp;关注</h4>
                                    <div class="avatar">
                                        <img src="./assets/eyeys.jfif" alt="" width="24" height="24">
                                        <div class="urlname">淘宝：WOW哇喔视觉</div>
                                        <img src="./assets/icon_pro_small.png" alt="" width="20" height="12">
                                    </div>
                                </div>
                            </div>
                            <div class="linkBack">
                                <i></i>
                                预览蒙版
                            </div>
                            <div class="followBoard">
                                <a href="#" class="notice">关注</a>
                                <a href="#" class="proceeding">预览</a>
                            </div>
                        </div>
                        <div class="board">
                            <div class="link">
                                <img src="./assets/webp.webp" alt="" class="large">
                                <img src="./assets/webp1.webp" alt="">
                                <img src="./assets/webp2.webp" alt="">
                                <img src="./assets/webp3.webp" alt="">
                                <div class="text">
                                    <h3>开工海报【源文件可下载】点击画面可跳转至下载界面！</h3>
                                    <h4>14&nbsp;采集&nbsp;&nbsp;11&nbsp;关注</h4>
                                    <div class="avatar">
                                        <img src="./assets/eyeys.jfif" alt="" width="24" height="24">
                                        <div class="urlname">淘宝：WOW哇喔视觉</div>
                                        <img src="./assets/icon_pro_small.png" alt="" width="20" height="12">
                                    </div>
                                </div>
                            </div>
                            <div class="linkBack">
                                <i></i>
                                预览蒙版
                            </div>
                            <div class="followBoard">
                                <a href="#" class="notice">关注</a>
                                <a href="#" class="proceeding">预览</a>
                            </div>
                        </div>
                        <div class="board">
                            <div class="link">
                                <img src="./assets/webp.webp" alt="" class="large">
                                <img src="./assets/webp1.webp" alt="">
                                <img src="./assets/webp2.webp" alt="">
                                <img src="./assets/webp3.webp" alt="">
                                <div class="text">
                                    <h3>开工海报【源文件可下载】点击画面可跳转至下载界面！</h3>
                                    <h4>14&nbsp;采集&nbsp;&nbsp;11&nbsp;关注</h4>
                                    <div class="avatar">
                                        <img src="./assets/eyeys.jfif" alt="" width="24" height="24">
                                        <div class="urlname">淘宝：WOW哇喔视觉</div>
                                        <img src="./assets/icon_pro_small.png" alt="" width="20" height="12">
                                    </div>
                                </div>
                            </div>
                            <div class="linkBack">
                                <i></i>
                                预览蒙版
                            </div>
                            <div class="followBoard">
                                <a href="#" class="notice">关注</a>
                                <a href="#" class="proceeding">预览</a>
                            </div>
                        </div>
                        <div class="board">
                            <div class="link">
                                <img src="./assets/webp.webp" alt="" class="large">
                                <img src="./assets/webp1.webp" alt="">
                                <img src="./assets/webp2.webp" alt="">
                                <img src="./assets/webp3.webp" alt="">
                                <div class="text">
                                    <h3>开工海报【源文件可下载】点击画面可跳转至下载界面！</h3>
                                    <h4>14&nbsp;采集&nbsp;&nbsp;11&nbsp;关注</h4>
                                    <div class="avatar">
                                        <img src="./assets/eyeys.jfif" alt="" width="24" height="24">
                                        <div class="urlname">淘宝：WOW哇喔视觉</div>
                                        <img src="./assets/icon_pro_small.png" alt="" width="20" height="12">
                                    </div>
                                </div>
                            </div>
                            <div class="linkBack">
                                <i></i>
                                预览蒙版
                            </div>
                            <div class="followBoard">
                                <a href="#" class="notice">关注</a>
                                <a href="#" class="proceeding">预览</a>
                            </div>
                        </div>
                        <div class="board">
                            <div class="link">
                                <img src="./assets/webp.webp" alt="" class="large">
                                <img src="./assets/webp1.webp" alt="">
                                <img src="./assets/webp2.webp" alt="">
                                <img src="./assets/webp3.webp" alt="">
                                <div class="text">
                                    <h3>开工海报【源文件可下载】点击画面可跳转至下载界面！</h3>
                                    <h4>14&nbsp;采集&nbsp;&nbsp;11&nbsp;关注</h4>
                                    <div class="avatar">
                                        <img src="./assets/eyeys.jfif" alt="" width="24" height="24">
                                        <div class="urlname">淘宝：WOW哇喔视觉</div>
                                        <img src="./assets/icon_pro_small.png" alt="" width="20" height="12">
                                    </div>
                                </div>
                            </div>
                            <div class="linkBack">
                                <i></i>
                                预览蒙版
                            </div>
                            <div class="followBoard">
                                <a href="#" class="notice">关注</a>
                                <a href="#" class="proceeding">预览</a>
                            </div>
                        </div>
                        <div class="board">
                            <div class="link">
                                <img src="./assets/webp.webp" alt="" class="large">
                                <img src="./assets/webp1.webp" alt="">
                                <img src="./assets/webp2.webp" alt="">
                                <img src="./assets/webp3.webp" alt="">
                                <div class="text">
                                    <h3>开工海报【源文件可下载】点击画面可跳转至下载界面！</h3>
                                    <h4>14&nbsp;采集&nbsp;&nbsp;11&nbsp;关注</h4>
                                    <div class="avatar">
                                        <img src="./assets/eyeys.jfif" alt="" width="24" height="24">
                                        <div class="urlname">淘宝：WOW哇喔视觉</div>
                                        <img src="./assets/icon_pro_small.png" alt="" width="20" height="12">
                                    </div>
                                </div>
                            </div>
                            <div class="linkBack">
                                <i></i>
                                预览蒙版
                            </div>
                            <div class="followBoard">
                                <a href="#" class="notice">关注</a>
                                <a href="#" class="proceeding">预览</a>
                            </div>
                        </div>
                        <div class="board">
                            <div class="link">
                                <img src="./assets/webp.webp" alt="" class="large">
                                <img src="./assets/webp1.webp" alt="">
                                <img src="./assets/webp2.webp" alt="">
                                <img src="./assets/webp3.webp" alt="">
                                <div class="text">
                                    <h3>开工海报【源文件可下载】点击画面可跳转至下载界面！</h3>
                                    <h4>14&nbsp;采集&nbsp;&nbsp;11&nbsp;关注</h4>
                                    <div class="avatar">
                                        <img src="./assets/eyeys.jfif" alt="" width="24" height="24">
                                        <div class="urlname">淘宝：WOW哇喔视觉</div>
                                        <img src="./assets/icon_pro_small.png" alt="" width="20" height="12">
                                    </div>
                                </div>
                            </div>
                            <div class="linkBack">
                                <i></i>
                                预览蒙版
                            </div>
                            <div class="followBoard">
                                <a href="#" class="notice">关注</a>
                                <a href="#" class="proceeding">预览</a>
                            </div>
                        </div>

                    </div>
                    <div class="content">“画板”UI/UX</div>
                    <div class="content">“画板”平面</div>
                    <div class="content">“画板”插画/漫画</div>
                    <div class="content">“画板”摄影</div>
                    <div class="content">“画板”游戏</div>
                    <div class="content">“画板”动漫</div>
                    <div class="content">“画板”工业设计</div>
                    <div class="content">“画板”建筑设计</div>
                    <div class="content">“画板”人文艺术</div>
                    <div class="content">“画板”家居/家装</div>
                    <div class="content">“画板”女装/搭配</div>
                    <div class="content">“画板”男士/风尚</div>
                    <div class="content">“画板”造型/美妆</div>
                    <div class="content">“画板”手工/布艺</div>
                    <div class="content">“画板”美食</div>
                    <div class="content">“画板”旅行</div>
                    <div class="content">“画板”婚礼</div>
                    <div class="content">“画板”儿童</div>
                    <div class="content">“画板”宠物</div>
                    <div class="content">“画板”美图</div>
                    <div class="content">“画板”明星</div>
                    <div class="content">“画板”美女</div>
                    <div class="content">“画板”礼物</div>
                    <div class="content">“画板”极客</div>
                    <div class="content">“画板”数据图</div>
                    <div class="content">“画板”汽车/摩托</div>
                    <div class="content">“画板”电影/图书</div>
                    <div class="content">“画板”生活百科</div>
                    <div class="content">“画板”教育</div>
                    <div class="content">“画板”运动</div>
                    <div class="content">“画板”搞笑</div>
                </div>
            </div>

        </main>
        <footer>
            <div class="leftFoot">
                <div class="title">
                    千万用户精选，优质在线灵感库
                </div>
                <div class="subtitle">
                    已有数千万出众网友，用花瓣发现灵感、保存图片
                </div>
            </div>
            <div class="rightFoot">
                <span class="words">合作账号直接登录：</span>
                <div class="pic">
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>
        </footer>
        <div class="model">
            <div class="mask">
                
            </div>
            <div class="dialog">
                <img src="./assets/logo.svg" alt="" width="106" height="36" class="flower">
                <div class="otherLogin">
                    <div class="withLine">
                        使用第三方账号登录
                    </div>
                    <div class="loginButtons">
                        <a href="#"></a>
                        <a href="#"></a>
                        <a href="#"></a>
                        <a href="#"></a>
                        <a href="#"></a>
                    </div>
                    <div class="withLine">
                        使用手机号/邮箱登录
                    </div>
                    <input type="text" placeholder="请输入手机号或邮箱" class="clearInput" style="margin-top: 15px;">
                    <input type="text" placeholder="密码" class="clearInput">
                    <input type="button" value="登录" class="inputLogin">
                    <div class="switchBack">
                        <a href="#" class="forgot">忘记密码>></a>
                        <span>还没有花瓣账号？<a href="#">点击注册>></a></span>
                    </div>
                </div>
                <div class="close">
                    
                </div>
            </div>
        </div>
    </div>
    <script src="./js/jquery.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>